<page-header [action]="phActionTpl">
  <ng-template #phActionTpl>
      <button (click)="add()" nz-button nzType="primary" >{{'add'|translate}}</button>
      <!-- <button nz-button nzType="primary" >导出</button>
      <button nz-button nzType="primary">导入</button> -->
  </ng-template>
</page-header>
<nz-card>

  <!--查询条件-->
  <form>
  <div nz-row nzGutter="24">
    <div nz-col nzMd="24" nzLg="2">
      <nz-form-label>{{'table.name'|translate}}</nz-form-label>
    </div>
    <div nz-col nzMd="24" nzLg="4">
      <input nz-input [(ngModel)]="serialPattern.tableName" name="tableName">
    </div>
    <div nz-col nzMd="24" nzLg="2">
      <nz-form-label>{{'field.name'|translate}}</nz-form-label>
    </div>
    <div nz-col nzMd="24" nzLg="4">
      <input nz-input [(ngModel)]="serialPattern.fieldName" name="fieldName">
    </div>
    <div nz-col nzMd="24" nzLg="2">
      <nz-form-label>{{'menu.Numbering.Mode'|translate}}</nz-form-label>
    </div>
    <div nz-col nzMd="24" nzLg="4">
      <input nz-input [(ngModel)]="serialPattern.serialPattern" name="serialPattern">
    </div>
    <div nz-col nzMd="24" nzLg="6">
        <button (click)="list(1)" nz-button nzType="primary">{{'button.query'|translate}}</button>
    </div>
  </div>
</form>
  <nz-table nzSize="small" #basicTable [nzData]="listOfData"
    [nzFrontPagination]="false"
    [nzTotal]="page.total"
    [nzPageIndex]="page.current"
    (nzPageIndexChange)="pageIndexChange($event)"
    [nzLoading]="isSpinning"
  >
    <thead>
      <tr>
        <th>{{'table.name'|translate}}</th>
        <th>{{'field.name'|translate}}</th>
        <th>{{'menu.Numbering.Mode'|translate}}</th>
        <th>{{'description'|translate}}</th>
        <th>{{'table.operation'|translate}}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of basicTable.data">
        <td>{{ data.tableName }}</td>
        <td>{{ data.fieldName }}</td>
        <td>{{ data.serialPattern }}</td>
        <td>{{ data.description }}</td>
        <td>
          <a href="javascript:void(0);" (click)="edit(data.id)">{{'edit'|translate}}</a>
          <nz-divider nzType="vertical"></nz-divider>
          <a nz-popconfirm
            nzTitle="{{'confirm.to.delete'|translate}}?"
            nzOkText="{{'yes'|translate}}"
            nzCancelText="{{'no'|translate}}"
            (nzOnConfirm)="delete(data.id)"
            (nzOnCancel)="cancelDel()"
            >{{'table.delete'|translate}}</a>
        </td>
      </tr>
    </tbody>
  </nz-table>

</nz-card>
